let myChart = echarts.init(document.getElementById("main"));
$.ajax({
  type: "get",
  url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
  dataType: "jsonp",
  success: function (res) {
    let obj = JSON.parse(res.data);
    let arr = obj.areaTree[0].children;
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
      newArr.push({ name: arr[i].name, value: arr[i].total.nowConfirm });
    }
    setEachart(newArr);
  },
});

function setEachart(data) {
  let option = {
    title: {
      text: "中国疫情",
    },
    tooltip: {
      show: true,
      formatter: "{a}-{b}-{c}",
    },
    visualMap: [
      // 将数据映射到视觉元素（视觉通道）
      {
        type: "piecewise",
        pieces: [
          // 设置指定区间数值和颜色
          { min: 10000, label: ">1000人", color: "#372a28" }, // 不指定 max，表示 max 为无限大（Infinity）。
          { min: 500, max: 999, label: "确诊人数500-999人", color: "#4e160f" },
          {
            min: 100,
            max: 499,
            label: "确诊人数100-499人",
            color: "#974236",
          },
          { min: 10, max: 99, label: ">10人", color: "#ee7263" },
          { min: 1, max: 9, label: "确诊人数", color: "#f5bba7" },
        ],
      },
    ],
    geo: {
      show: true,
      map: "china",
      label: {
        show: true,
      },
      emphasis: {
        // 高亮，鼠标经过显示的内容
        label: {
          show: true, // 显示标签
        },
        itemStyle: {
          color: "orange", // 鼠标经过时地图显示的颜色
        },
      },
    },
    series: [
      {
        name: "地图",
        type: "map",
        geoIndex: 0,
        data: data,
      },
    ],
  };

  myChart.setOption(option);
}
